<template>
  <div class="tenantMenu_main main_container">
    <div v-loading="loading" class="main_main">
      <div class="choose_search">
        <div class="choose_search_item">
          <el-input v-model="pageData.searchBatch" placeholder="请输入批号" clearable @clear="getList" @keyup.enter.native="getList" />
        </div>
        <div class="choose_search_button">
          <a class="button" @click.stop="getList">
            <svg-icon icon-class="查询" />
          </a>
        </div>
        <!--        <div class="main_main_search_item">-->
        <!--          <div class="name">批号</div>-->
        <!--          <div class="value">-->
        <!--            <el-input v-model="pageData.searchBatch" placeholder="请输入" clearable @clear="getList" @keyup.enter.native="getList" />-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="main_main_search_item">-->
        <!--          <a class="button" @click.stop="getList">-->
        <!--            搜索-->
        <!--          </a>-->
        <!--        </div>-->
      </div>
      <div ref="table_container" class="table_container">
        <el-table
          v-if="defaultTableColumns.length>0"
          ref="table"
          :data="tableData"
          stripe
          border
          :height="tableHeight"

          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @sort-change="(column)=>{sortChange(column, this)}"
        >
          <Column v-for="(column,index) in defaultTableColumns" :key="index" :prop="column.prop" :is-show="column.isShow" :label="column.label" :sortable="column.sortable" :width="column.width" />
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <pagination
        :total="total"
        :page.sync="pageData.pageNum"
        :limit.sync="pageData.pageSize"
        :selected-num="selectionsAll.length"
        @pagination="getList"
      />
    </div>
    <!-- <div style="background:white" class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
    </div> -->
  </div>
</template>

<script>
import { getBatchByBookIdAndWarehouseId } from '@/api/equipmentManage/sparePart/inventory'
export default {
  name: 'Index',
  props: {
    layerid: {},
    deviceSpareStandingBookId: {},
    deviceSpareWarehouseId: {}
  },
  data() {
    return {
      loading: true,
      pageId: '备件信息',
      pageData: {
        companyName: undefined,
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc',
        searchBatch: ''
      },
      total: 1, // 数据一共有多少条
      mainId: 'id',
      tableHeight: '0',
      tableData: [],
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      defaultTableColumns: [// 表格常规字段（初始值）
        { prop: 'batch', label: '批号' },
        { prop: 'number', label: '数量' }
      ],
      materialData: []
    }
  },
  mounted() {
    this.getList()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.table_container.offsetHeight
    })
  },
  methods: {
    getList() {
      getBatchByBookIdAndWarehouseId({
        ...this.pageData,
        deviceSpareWarehouseId: this.deviceSpareWarehouseId,
        deviceSpareStandingBookId: this.deviceSpareStandingBookId
      }).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.loading = false
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.main_container{
  display: flex;
  flex-direction: column;
}
.main_main{
  margin: 0;
  flex: 1;
}
.choose_search{
  width: 100%;height: 50px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  /deep/ .el-input__inner{
    width: 180px;
    height: 30px;
    line-height: 30px;
  }
  /deep/ .el-input__suffix{
    height: 30px !important;
    display: flex;justify-content: center;align-items: center;
    .el-input__icon{
      height: 30px !important;
      display: flex;justify-content: center;align-items: center;
    }
  }
  .choose_search_item{
    padding-right: 10px;
  }

  .choose_search_button{
    width: 30px;
    height: 30px;
    display: flex;justify-content: center;align-items: center;
    border-radius: 4px;
    background-color: rgba(56, 123, 252, 1);
    .button{
      width: 30px;
      height: 30px;
      font-size: 14px;
      color: white;
      display: flex;justify-content: center;align-items: center;
    }
  }
  .choose_search_button:hover{
    background-color: rgba(56, 123, 252, 0.5);
  }

}
</style>
